<template style="background-color: #FFFFFF;">
	<view>
		<u-form style="background-color: #FFFFFF;padding: 20rpx;" :model="nowUser" ref="uForm">
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
				label-position="left" label="学号" prop="title">
				<view style="height: 100%;width: 100%;">
					<u-input :border="true" placeholder="请输入学号" v-model="nowUser.userId" type="number"></u-input>
				</view>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
				label-position="left" label="名字" prop="title">
				<view style="height: 100%;width: 100%;">
					<u-input :border="true" placeholder="请输入名字" v-model="nowUser.username" type="text"></u-input>
				</view>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
				label-position="left" label="密码" prop="title">
				<view style="height: 100%;width: 100%;">
					<u-input :border="true" placeholder="请输入密码" v-model="nowUser.pwd" type="password"></u-input>
				</view>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
				label-position="left" label="logo" prop="title">
				<u-upload ref="uUpload" :custom-btn="false" :show-upload-list="true"
					:auto-upload="false" :show-progress="true" :deletable="true" :max-count="1"
					@on-list-change="onListChange">
				</u-upload>
			</u-form-item>
			<u-form-item label-position="left" label="所属高校" prop="university" label-width="180">
				<u-input :border="true" type="select" :select-open="selectUniversityShow" v-model="nowUser.university" placeholder="请选择所属高校" @click="selectUniversityShow = true"></u-input>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
				label-position="left" label="用户简介" prop="title">
				<view style="height: 100%;width: 100%;">
					<u-input :border="true" placeholder="请输入用户简介" v-model="nowUser.userinfo" type="text"></u-input>
				</view>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
				label-position="left" label="年级" prop="title">
				<view style="height: 100%;width: 100%;">
					<u-input :border="true" placeholder="请输入年级" v-model="nowUser.grade" type="text"></u-input>
				</view>
			</u-form-item>
		</u-form>
		<u-button @click="doRegister" :loading="doRegisterButtonLoading" shape="square" size="default" :ripple="true"
			type="warning">登录</u-button>
			<!-- 提示框 -->
		<u-top-tips ref="uTips"></u-top-tips>
		<!-- 大学选择框 -->
		<u-select mode="single-column" :list="allUniversity" v-model="selectUniversityShow" @confirm="selectUniversityConfirm"></u-select>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: mapState(['isLogin', 'loginUserInfo']),
		data() {
			return {
				doRegisterButtonLoading:false,
				AvatarLists: [],
				nowUser:{
					userId:"",//学号
					username:"",	//姓名
					avatar:"",		//头像
					pwd:"",			//密码
					university:"",	//所属高校
					universityId:"",	//所属高校
					userinfo:"",	//用户简介
					grade:"",		//年级
				},
				selectUniversityShow:false,
				allUniversity:[],
			}
		},
		created(){
			this.loadAllUniversity();
		},
		methods: {
			...mapMutations(['login']),
			doRegister() {
				if(this.nowUser.username==""||this.nowUser.username==0){
					this.showTips(2000,"请输入学号","error")
					return;
				}
				if(this.nowUser.username==""){
					this.showTips(2000,"请输入名字","error")
					return;
				}
				if(this.AvatarLists.length==0){
					this.showTips(2000,"请选择头像","error")
					return;
				}
				if(this.nowUser.pwd==""){
					this.showTips(2000,"请输入密码","error")
					return;
				}
				if(this.nowUser.university==""){
					this.showTips(2000,"请选择大学","error")
					return;
				}
				if(this.nowUser.userinfo==""){
					this.showTips(2000,"请输入用户简介","error")
					return;
				}
				if(this.nowUser.grade==""){
					this.showTips(2000,"请输入年级","error")
					return;
				}
				this.doRegisterButtonLoading = true
				console.log(this.nowUser)
				//先存头像，再存其他
				uni.uploadFile({
					url: this.url.file.upload, //仅为示例，非真实的接口地址
					method: 'POST',
					filePath: this.AvatarLists[0].url,
					name: 'file',
					success: (res) => {
						console.log(res)
						var data = JSON.parse(res.data);
						if(data.msg == "success"&& data.url!=null) {
							this.nowUser.avatar = data.url
							console.log(this.nowUser)
							//新增
							uni.request({
								url: this.url.user.save,
								method: 'POST',
								data: JSON.stringify(this.nowUser),
								header: {
									"content-type": "application/json;charset=UTF-8"
								},
								success: (res) => {
									console.log(res)
									if (res.data.msg == "success") {
										this.doRegisterButtonLoading = false
										
										// 实现登录，登录中实现跳转
										var user = {
											userId: this.nowUser.userId,
											pwd: this.nowUser.pwd
										}
										this.doLogin(user)
									}else{
										this.showTips(3000, res.data.msg, "error")
									}
								},
								fail: (res) => {
									console.log("失败！")
								}
							});
						}
					},
					fail: (res) => {
						console.log(res)
					}
				});
				this.doRegisterButtonLoading = false
			},
			loadAllUniversity(){
				uni.request({
					url: this.url.university.getAllUniversity,
					method: 'GET',
					header: {},
					success: (res) => {
						this.allUniversity = res.data.allUniversity
						console.log(this.allUniversity)
						for(var i=0;i<this.allUniversity.length;i++){
							this.allUniversity[i].label = this.allUniversity[i].name
							this.allUniversity[i].value = this.allUniversity[i].id
						}
					},
					fail: (res) => {
						console.log("失败 -- 得到全部学校", res)
					}
				});
			},
			showTips(duration, title, type) {
				this.$refs.uTips.show({
					duration: duration,
					title: title,
					type: type
				});
			},
			onListChange(lists) {
				this.AvatarLists = lists;
				console.log("选择的图片进入集合")
				console.log(this.AvatarLists)
			},
			selectUniversityConfirm(e) {
				console.log(e)
				this.nowUser.university = e[0].label
				this.nowUser.universityId = e[0].value
				console.log(this.nowUser)
			},
			
			
			doLogin(user) {
				console.log(user)
				//先请求数据库，再存储到本地
				uni.request({
					url: this.url.user.login,
					method: 'POST',
					data: JSON.stringify(user),
					header: {
						"content-type": "application/json;charset=UTF-8"
					},
					success: (res) => {
						if (res.data.msg == "success") {
							this.login(res.data.user)
							// this.setStorage("user",)
							this.user = res.data.user
							console.log(this.loginUserInfo)
							this.nowUser = {
								userId:"",//学号
								username:"",	//姓名
								avatar:"",		//头像
								pwd:"",			//密码
								university:"",	//所属高校
								universityId:"",	//所属高校
								userinfo:"",	//用户简介
								grade:"",		//年级
							}
							// 实现跳转到主页
							uni.switchTab({
								url: '/pages/index/index'
							});
						} else {
							this.showTips(3000, res.data.msg, "error")
							console.log(res.data.msg);
						}
					},
					fail: (res) => {
						this.showTips(3000, res.data.msg, "error")
						console.log(res)
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;

		.content {
			width: 600rpx;
			margin: 80rpx auto 0;

			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

			.tips {
				color: $u-type-info;
				margin-bottom: 60rpx;
				margin-top: 8rpx;
			}

			.getCaptcha {
				background-color: rgb(253, 243, 208);
				color: $u-tips-color;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;

				&::after {
					border: none;
				}
			}

			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}

		.buttom {
			.loginType {
				display: flex;
				padding: 350rpx 150rpx 150rpx 150rpx;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: $u-content-color;
					font-size: 28rpx;
				}
			}

			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $u-tips-color;

				.link {
					color: $u-type-warning;
				}
			}
		}
	}
</style>
